<template>
	<view class="lz-chat" :class="APPTheme">
		<!-- <uni-nav-bar fixed status-bar left-icon="back" :color="APPTheme=='theme-light'?'#000000':'#ffffff'" :background-color="APPTheme=='theme-light'?'#ffffff':'#000000'" @clickRight="clickRightclose" @clickLeft="$lizhao.lznavigate.lzNavigateBack()">
			<view style="text-align: center;flex:1;">{{receiveInfo.name}}</view>
			<view slot="right">
				<uni-icons type="more-filled" :color="APPTheme=='theme-light'?'#888':'#ffffff'"></uni-icons>
			</view>
		</uni-nav-bar> -->
		<view class="content" @touchstart="hideDrawer" >
			<scroll-view class="msg-list" scroll-y="true" :scroll-with-animation="scrollAnimation"  :scroll-top="scrollTop" :refresher-background="APPTheme=='theme-light'?'#ffffff':'#000000'" :refresher-threshold="100" :scroll-into-view="scrollToView" refresher-enabled :refresher-triggered="isHistoryLoading" @refresherrefresh="loadHistory" @refresherrestore="refresherrestore">
				<!-- 加载历史数据waitingUI -->
				<!-- <lz-loading v-show="isHistoryLoading"></lz-loading> -->
				<view class="row" v-for="(row,index) in msgList" :key="index" :id="'msg'+row.uuid">
					<!-- 系统消息 -->
					<block v-if="row.type=='system'">
						<view class="system">
							<!-- 文字消息 -->
							<view v-if="row.messageType=='text'" class="text">
								{{row.content.text}}
							</view>
							<!-- 领取红包消息 -->
							<view v-if="row.messageType=='redEnvelope'" class="red-envelope">
								<image src="/static/image/im/red-envelope-chat.png"></image>
								{{row.content.text}}
							</view>
						</view>
					</block>
					<!-- 用户消息 -->
					<block v-if="row.type=='user'">
						<!-- 自己发出的消息 -->
						<view class="my" v-if="row.userId==JSON.parse(userInfo).id">
							<!-- 左-消息 -->
							<view class="left">
								<!-- 文字消息 -->
								<u-loading  mode="circle" color="red" v-if="row.isSend==0" style="margin-right: 10px;"></u-loading>
								<view v-if="row.messageType=='text'" class="bubble">
									<rich-text :nodes="row.content.text"></rich-text>
								</view>
								<!-- 语言消息 -->
								<view v-if="row.messageType=='voice'" class="bubble voice" @tap="playVoice(row)" :class="playMsgid == row.uuid?'play':''">
									<view class="length">{{row.content.length}}</view>
									<view class="iconfont icon-voice"></view>
								</view>
								<!-- 图片消息 -->
								<view v-if="row.messageType=='img'" class="bubble img" @tap="showPic(row)">
									<image :src="row.content.url" :style="{'width': row.content.w+'px','height': row.content.h+'px'}"></image>
								</view>
								<!-- 视频消息 -->
								<view v-if="row.messageType=='video'" class="video-warp" @click="openVideo(row)">
									<view class="video">
										<image class="image" :src="row.content.videoPath"></image>
										<uni-icons class="videocam-filled" type="videocam-filled" size="40" color="#00aa7f"></uni-icons>
										<view class="v-name">
											<view>{{row.content.fileName}}</view>
										</view>
									</view>
								</view>
								<!-- 红包 -->
								<view v-if="row.messageType=='redEnvelope'" class="bubble red-envelope" @tap="openRedEnvelope(row,index)">
									<image src="/static/image/im/red-envelope.png"></image>
									<view class="tis">
										<!-- 点击开红包 -->
									</view>
									<view class="blessing">
										{{row.content.blessing}}
									</view>
								</view>
								
							</view>
							<!-- 右-头像 -->
							<view class="right">
								<u-avatar v-if="JSON.parse(userInfo).photo" :src="JSON.parse(userInfo).photo" mode="square"></u-avatar>
								<view class="text-warp" v-else>{{computedUserInfo(JSON.parse(userInfo))}}</view>
							</view>
						</view>
						<!-- 别人发出的消息 -->
						<view class="other" v-if="row.userId!=JSON.parse(userInfo).id">
							<!-- 左-头像 -->
							<view class="left">
								<u-avatar v-if="receiveInfo.photo" :src="receiveInfo.photo" mode="square"></u-avatar>
								<view class="text-warp" v-else>{{computedUserInfo(receiveInfo)}}</view>
							</view>
							<!-- 右-用户名称-时间-消息 -->
							<view class="right">
								<view class="username">
									<view class="name">{{receiveInfo.name}}</view> <view class="time">{{$lizhao.timeFormat(row.time,'yyyy-mm-dd hh:MM:ss')}}</view>
								</view>
								<!-- 文字消息 -->
								<view v-if="row.messageType=='text'" class="bubble">
									<rich-text :nodes="row.content.text"></rich-text>
								</view>
								<!-- 语音消息 -->
								<view v-if="row.messageType=='voice'" class="bubble voice" @tap="playVoice(row)" :class="playMsgid == row.uuid?'play':''">
									<view class="iconfont icon-yuyin2"></view>
									<view class="length">{{row.content.length}}</view>
								</view>
								<!-- 图片消息 -->
								<view v-if="row.messageType=='img'" class="bubble img" @tap="showPic(row)">
									<image :src="row.content.url" :style="{'width': row.content.w+'px','height': row.content.h+'px'}"></image>
								</view>
								<!-- 视频消息 -->
								<view v-if="row.messageType=='video'" class="video-warp" @click="openVideo(row)">
									<view class="video">
										<image class="image" :src="row.content.videoPath"></image>
										<uni-icons class="videocam-filled" type="videocam-filled" size="40" color="#00aa7f"></uni-icons>
										<view class="v-name">
											<view>{{row.content.fileName}}</view>
										</view>
									</view>
								</view>
								<!-- 红包 -->
								<view v-if="row.messageType=='redEnvelope'" class="bubble red-envelope" @tap="openRedEnvelope(row,index)">
									<image src="/static/image/im/red-envelope.png"></image>
									<view class="tis">
										<!-- 点击开红包 -->
									</view>
									<view class="blessing">
										{{row.content.blessing}}
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view style="height: 100rpx;width: 100%;opacity: 0;"></view>
			</scroll-view>
		</view>
		<!-- 抽屉栏 -->
		<view class="popup-layer theme-bg theme-border-top" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- 表情 --> 
			<swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150">
				<swiper-item v-for="(page,pid) in emojiList" :key="pid">
					<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
						<image mode="widthFix" :src="'/static/image/im/emoji/'+em.url"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 更多功能 相册-拍照-红包 -->
			<view class="more-layer" :class="{hidden:hideMore}">
				<view class="list">
					<view class="box" @tap="getImage"><view class="iconfont icon-tup"></view></view>
					<view class="box" @tap="getCamera"><view class="iconfont icon-xiangji"></view></view>
					<view class="box" @tap="handRedEnvelopes"><view class="iconfont icon-hongbao"></view></view>
				</view>
			</view>
		</view>
		<!-- 底部输入栏 -->
		<view class="input-box theme-bg theme-border-bottom-auto" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- H5下不能录音，输入栏布局改动一下 -->
			<!-- #ifndef H5 -->
			<view class="voice">
				<view class="iconfont" :class="isVoice?'icon-jianpan':'icon-yuyin'" @tap="switchVoice"></view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="more" @tap="showMore">
				<view class="iconfont icon-icon_yuanxin_jia"></view>
			</view>
			<!-- #endif -->
			<view class="textbox">
				<view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel">{{voiceTis}}</view>
				<view class="text-mode"  :class="isVoice?'hidden':''">
					<view class="box">
						<textarea auto-height="true" :cursor-spacing="15" v-model="textMsg" @focus="textareaFocus"/>
					</view>
					<view class="em" @tap="chooseEmoji">
						<view class="iconfont icon-smile"></view>
					</view>
				</view>
			</view>
			<!-- #ifndef H5 -->
			<view class="more" @tap="showMore">
				<view class="iconfont icon-icon_yuanxin_jia"></view>
			</view>
			<!-- #endif -->
			<view class="send" :class="isVoice?'hidden':''" @tap="sendText">
				<view class="btn">发送</view>
			</view>
		</view>
		<!-- 录音UI效果 -->
		<view class="record" :class="recording?'':'hidden'">
			<view class="ing" :class="willStop?'hidden':''"><view class="iconfont icon-luyin" ></view></view>
			<view class="cancel" :class="willStop?'':'hidden'"><view class="iconfont icon-luyinchexiao" ></view></view>
			<view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
		</view>
		<!-- 红包弹窗 -->
		<view class="windows" :class="windowsState">
			<!-- 遮罩层 -->
			<view class="mask" @touchmove.stop.prevent="discard" @tap="closeRedEnvelope"></view>
			<view class="layer" @touchmove.stop.prevent="discard">
				<view class="open-redenvelope">
					<view class="top">
						<view class="close-btn">
							<view class="iconfont icon-guanbi7-01copy" @tap="closeRedEnvelope"></view>
						</view>
						<image src="/static/img/im/face/face_1.jpg"></image>
					</view>
					<view class="from">来自{{redenvelopeData.from}}</view>
					<view class="blessing">{{redenvelopeData.blessing}}</view>
					<view class="money">{{redenvelopeData.money}}</view>
					<view class="showDetails" @tap="toDetails(redenvelopeData.rid)">
						查看领取详情 <view class="iconfont icon-go2"></view>
					</view>
				</view>
			</view>
		</view>
		<u-no-network></u-no-network>
	</view>
</template>
<script>
	let that,SocketTask
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['APPTheme', 'userInfo', 'api']),
			computedLoad(){
				return (res)=>{
					if(res==0){//loading正在发送
						return "loading"
					}else if(res==1){
						return "noMore"
					}
				}
			},
			computedUserInfo(){
				return (item)=>{
					let user=''
					if(item.name){
						user=item.name.slice(item.name.length-2,item.name.length);
					}
					
					return user
				}
			}
		},
		data() {
			return {
				//文字消息
				textMsg:'',
				//消息列表
				isHistoryLoading:false,
				scrollAnimation:false,
				scrollTop:0,
				scrollToView:'',
				msgList:[],
				msgImgList:[],
				SqChatData:[],//本地数据库聊天记录
				receiveId:'',//接收者id
				
				//录音相关参数
				// #ifndef H5
				//H5不能录音
				RECORDER:uni.getRecorderManager(),
				// #endif
				isVoice:false,
				voiceTis:'按住 说话',
				recordTis:"手指上滑 取消发送",
				recording:false,
				willStop:false,
				initPoint:{identifier:0,Y:0},
				recordTimer:null,
				recordLength:0,
				
				//播放语音相关参数
				AUDIO:uni.createInnerAudioContext(),
				playMsgid:null,
				VoiceTimer:null,
				// 抽屉参数
				popupLayerClass:'',
				// more参数
				hideMore:true,
				//表情定义
				hideEmoji:true,
				emojiList:[
					[{"url":"100.gif",alt:"[微笑]"},{"url":"101.gif",alt:"[伤心]"},{"url":"102.gif",alt:"[美女]"},{"url":"103.gif",alt:"[发呆]"},{"url":"104.gif",alt:"[墨镜]"},{"url":"105.gif",alt:"[哭]"},{"url":"106.gif",alt:"[羞]"},{"url":"107.gif",alt:"[哑]"},{"url":"108.gif",alt:"[睡]"},{"url":"109.gif",alt:"[哭]"},{"url":"110.gif",alt:"[囧]"},{"url":"111.gif",alt:"[怒]"},{"url":"112.gif",alt:"[调皮]"},{"url":"113.gif",alt:"[笑]"},{"url":"114.gif",alt:"[惊讶]"},{"url":"115.gif",alt:"[难过]"},{"url":"116.gif",alt:"[酷]"},{"url":"117.gif",alt:"[汗]"},{"url":"118.gif",alt:"[抓狂]"},{"url":"119.gif",alt:"[吐]"},{"url":"120.gif",alt:"[笑]"},{"url":"121.gif",alt:"[快乐]"},{"url":"122.gif",alt:"[奇]"},{"url":"123.gif",alt:"[傲]"}],
					[{"url":"124.gif",alt:"[饿]"},{"url":"125.gif",alt:"[累]"},{"url":"126.gif",alt:"[吓]"},{"url":"127.gif",alt:"[汗]"},{"url":"128.gif",alt:"[高兴]"},{"url":"129.gif",alt:"[闲]"},{"url":"130.gif",alt:"[努力]"},{"url":"131.gif",alt:"[骂]"},{"url":"132.gif",alt:"[疑问]"},{"url":"133.gif",alt:"[秘密]"},{"url":"134.gif",alt:"[乱]"},{"url":"135.gif",alt:"[疯]"},{"url":"136.gif",alt:"[哀]"},{"url":"137.gif",alt:"[鬼]"},{"url":"138.gif",alt:"[打击]"},{"url":"139.gif",alt:"[bye]"},{"url":"140.gif",alt:"[汗]"},{"url":"141.gif",alt:"[抠]"},{"url":"142.gif",alt:"[鼓掌]"},{"url":"143.gif",alt:"[糟糕]"},{"url":"144.gif",alt:"[恶搞]"},{"url":"145.gif",alt:"[什么]"},{"url":"146.gif",alt:"[什么]"},{"url":"147.gif",alt:"[累]"}],
					[{"url":"148.gif",alt:"[看]"},{"url":"149.gif",alt:"[难过]"},{"url":"150.gif",alt:"[难过]"},{"url":"151.gif",alt:"[坏]"},{"url":"152.gif",alt:"[亲]"},{"url":"153.gif",alt:"[吓]"},{"url":"154.gif",alt:"[可怜]"},{"url":"155.gif",alt:"[刀]"},{"url":"156.gif",alt:"[水果]"},{"url":"157.gif",alt:"[酒]"},{"url":"158.gif",alt:"[篮球]"},{"url":"159.gif",alt:"[乒乓]"},{"url":"160.gif",alt:"[咖啡]"},{"url":"161.gif",alt:"[美食]"},{"url":"162.gif",alt:"[动物]"},{"url":"163.gif",alt:"[鲜花]"},{"url":"164.gif",alt:"[枯]"},{"url":"165.gif",alt:"[唇]"},{"url":"166.gif",alt:"[爱]"},{"url":"167.gif",alt:"[分手]"},{"url":"168.gif",alt:"[生日]"},{"url":"169.gif",alt:"[电]"},{"url":"170.gif",alt:"[炸弹]"},{"url":"171.gif",alt:"[刀子]"}],
					[{"url":"172.gif",alt:"[足球]"},{"url":"173.gif",alt:"[瓢虫]"},{"url":"174.gif",alt:"[翔]"},{"url":"175.gif",alt:"[月亮]"},{"url":"176.gif",alt:"[太阳]"},{"url":"177.gif",alt:"[礼物]"},{"url":"178.gif",alt:"[抱抱]"},{"url":"179.gif",alt:"[拇指]"},{"url":"180.gif",alt:"[贬低]"},{"url":"181.gif",alt:"[握手]"},{"url":"182.gif",alt:"[剪刀手]"},{"url":"183.gif",alt:"[抱拳]"},{"url":"184.gif",alt:"[勾引]"},{"url":"185.gif",alt:"[拳头]"},{"url":"186.gif",alt:"[小拇指]"},{"url":"187.gif",alt:"[拇指八]"},{"url":"188.gif",alt:"[食指]"},{"url":"189.gif",alt:"[ok]"},{"url":"190.gif",alt:"[情侣]"},{"url":"191.gif",alt:"[爱心]"},{"url":"192.gif",alt:"[蹦哒]"},{"url":"193.gif",alt:"[颤抖]"},{"url":"194.gif",alt:"[怄气]"},{"url":"195.gif",alt:"[跳舞]"}],
					[{"url":"196.gif",alt:"[发呆]"},{"url":"197.gif",alt:"[背着]"},{"url":"198.gif",alt:"[伸手]"},{"url":"199.gif",alt:"[耍帅]"},{"url":"200.png",alt:"[微笑]"},{"url":"201.png",alt:"[生病]"},{"url":"202.png",alt:"[哭泣]"},{"url":"203.png",alt:"[吐舌]"},{"url":"204.png",alt:"[迷糊]"},{"url":"205.png",alt:"[瞪眼]"},{"url":"206.png",alt:"[恐怖]"},{"url":"207.png",alt:"[忧愁]"},{"url":"208.png",alt:"[眨眉]"},{"url":"209.png",alt:"[闭眼]"},{"url":"210.png",alt:"[鄙视]"},{"url":"211.png",alt:"[阴暗]"},{"url":"212.png",alt:"[小鬼]"},{"url":"213.png",alt:"[礼物]"},{"url":"214.png",alt:"[拜佛]"},{"url":"215.png",alt:"[力量]"},{"url":"216.png",alt:"[金钱]"},{"url":"217.png",alt:"[蛋糕]"},{"url":"218.png",alt:"[彩带]"},{"url":"219.png",alt:"[礼物]"},]				
				],
				//表情图片图床名称 ，由于我上传的第三方图床名称会有改变，所以有此数据来做对应，您实际应用中应该不需要
				onlineEmoji:{"100.gif":"AbNQgA.gif","101.gif":"AbN3ut.gif","102.gif":"AbNM3d.gif","103.gif":"AbN8DP.gif","104.gif":"AbNljI.gif","105.gif":"AbNtUS.gif","106.gif":"AbNGHf.gif","107.gif":"AbNYE8.gif","108.gif":"AbNaCQ.gif","109.gif":"AbNN4g.gif","110.gif":"AbN0vn.gif","111.gif":"AbNd3j.gif","112.gif":"AbNsbV.gif","113.gif":"AbNwgs.gif","114.gif":"AbNrD0.gif","115.gif":"AbNDuq.gif","116.gif":"AbNg5F.gif","117.gif":"AbN6ET.gif","118.gif":"AbNcUU.gif","119.gif":"AbNRC4.gif","120.gif":"AbNhvR.gif","121.gif":"AbNf29.gif","122.gif":"AbNW8J.gif","123.gif":"AbNob6.gif","124.gif":"AbN5K1.gif","125.gif":"AbNHUO.gif","126.gif":"AbNIDx.gif","127.gif":"AbN7VK.gif","128.gif":"AbNb5D.gif","129.gif":"AbNX2d.gif","130.gif":"AbNLPe.gif","131.gif":"AbNjxA.gif","132.gif":"AbNO8H.gif","133.gif":"AbNxKI.gif","134.gif":"AbNzrt.gif","135.gif":"AbU9Vf.gif","136.gif":"AbUSqP.gif","137.gif":"AbUCa8.gif","138.gif":"AbUkGQ.gif","139.gif":"AbUFPg.gif","140.gif":"AbUPIS.gif","141.gif":"AbUZMn.gif","142.gif":"AbUExs.gif","143.gif":"AbUA2j.gif","144.gif":"AbUMIU.gif","145.gif":"AbUerq.gif","146.gif":"AbUKaT.gif","147.gif":"AbUmq0.gif","148.gif":"AbUuZV.gif","149.gif":"AbUliF.gif","150.gif":"AbU1G4.gif","151.gif":"AbU8z9.gif","152.gif":"AbU3RJ.gif","153.gif":"AbUYs1.gif","154.gif":"AbUJMR.gif","155.gif":"AbUadK.gif","156.gif":"AbUtqx.gif","157.gif":"AbUUZ6.gif","158.gif":"AbUBJe.gif","159.gif":"AbUdIO.gif","160.gif":"AbU0iD.gif","161.gif":"AbUrzd.gif","162.gif":"AbUDRH.gif","163.gif":"AbUyQA.gif","164.gif":"AbUWo8.gif","165.gif":"AbU6sI.gif","166.gif":"AbU2eP.gif","167.gif":"AbUcLt.gif","168.gif":"AbU4Jg.gif","169.gif":"AbURdf.gif","170.gif":"AbUhFS.gif","171.gif":"AbU5WQ.gif","172.gif":"AbULwV.gif","173.gif":"AbUIzj.gif","174.gif":"AbUTQs.gif","175.gif":"AbU7yn.gif","176.gif":"AbUqe0.gif","177.gif":"AbUHLq.gif","178.gif":"AbUOoT.gif","179.gif":"AbUvYF.gif","180.gif":"AbUjFU.gif","181.gif":"AbaSSJ.gif","182.gif":"AbUxW4.gif","183.gif":"AbaCO1.gif","184.gif":"Abapl9.gif","185.gif":"Aba9yR.gif","186.gif":"AbaFw6.gif","187.gif":"Abaiex.gif","188.gif":"AbakTK.gif","189.gif":"AbaZfe.png","190.gif":"AbaEFO.gif","191.gif":"AbaVYD.gif","192.gif":"AbamSH.gif","193.gif":"AbaKOI.gif","194.gif":"Abanld.gif","195.gif":"Abau6A.gif","196.gif":"AbaQmt.gif","197.gif":"Abal0P.gif","198.gif":"AbatpQ.gif","199.gif":"Aba1Tf.gif","200.png":"Aba8k8.png","201.png":"AbaGtS.png","202.png":"AbaJfg.png","203.png":"AbaNlj.png","204.png":"Abawmq.png","205.png":"AbaU6s.png","206.png":"AbaaXn.png","207.png":"Aba000.png","208.png":"AbarkT.png","209.png":"AbastU.png","210.png":"AbaB7V.png","211.png":"Abafn1.png","212.png":"Abacp4.png","213.png":"AbayhF.png","214.png":"Abag1J.png","215.png":"Aba2c9.png","216.png":"AbaRXR.png","217.png":"Aba476.png","218.png":"Abah0x.png","219.png":"Abdg58.png"},
				//红包相关参数
				windowsState:'',
				redenvelopeData:{
					rid:null,	//红包ID
					from:null,
					face:null,
					blessing:null,
					money:null
				},
				page:{
					pageSize:10,
					pageNum:1
				},
				//接收者用户信息
				receiveInfo:{},
			};
		},
		async onLoad(option) {
			that=this
			that.receiveId=option.receiveId
			//获取接收者信息
			that.getReceiveInfoFn()
			// [
			// 	{type:"system",uuid:0,messageType:"text",content:{text:"欢迎进入HM-chat聊天室"}},
			// 	{type:"user",uuid:1,messageType:"text",time:"12:56",userId:0,receiveId:1,isSend:0,content:{text:"为什么温度会相差那么大？"}},
			// 	{type:"user",uuid:2,messageType:"text",time:"12:57",userId:1,receiveId:0,isSend:0,content:{text:"这个是有偏差的，两个温度相差十几二十度是很正常的，如果相差五十度，那即是质量问题了。"}},
			// 	{type:"user",uuid:3,messageType:"voice",time:"12:59",userId:1,receiveId:0,isSend:0,content:{url:"/static/voice/1.mp3",length:"00:06"}},
			// 	{type:"user",uuid:4,messageType:"voice",time:"13:05",userId:0,receiveId:1,isSend:0,content:{url:"/static/voice/2.mp3",length:"00:06"}},
			// 	{type:"user",uuid:5,messageType:"img",time:"13:05",userId:0,receiveId:1,isSend:0,content:{url:"/static/img/p10.jpg",w:200,h:200}},
			// 	{type:"user",uuid:6,messageType:"img",time:"12:59",userId:1,receiveId:0,isSend:0,content:{url:"/static/img/q.jpg",w:1920,h:1080}},
			// 	{type:"system",uuid:7,messageType:"text",content:{text:"欢迎进入HM-chat聊天室"}},

			// 	{type:"system",uuid:9,messageType:"redEnvelope",content:{text:"售后客服008领取了你的红包"}},
			// 	{type:"user",uuid:10,messageType:"redEnvelope",time:"12:56",userId:0,receiveId:1,isSend:0,content:{blessing:"恭喜发财，大吉大利，万事如意",rid:0,isReceived:false}},
			// 	{type:"user",uuid:11,messageType:"redEnvelope",time:"12:56",userId:1,receiveId:0,isSend:0,content:{blessing:"恭喜发财",rid:1,isReceived:false}},
			// ]
			//监听到删除
			uni.$off('deleteChatRecord_lz_chat')
			uni.$on('deleteChatRecord_lz_chat',res=>{
				that.msgList=[]
				that.SqChatData=[]
			})
			//监听全局消息
			uni.$off('pages_lz_chat')
			uni.$on('pages_lz_chat',res=>{
				if(res.userId==that.receiveId){
					// 模拟本地发送消息
					that.screenMsg(res);
				}
				
			})
			//打开数据库
			this.openDatabase()
			//语音自然播放结束
			this.AUDIO.onEnded((res)=>{
				this.playMsgid=null;
			});
			// #ifndef H5
			//录音开始事件
			this.RECORDER.onStart((e)=>{
				this.recordBegin(e);
			})
			//录音结束事件
			this.RECORDER.onStop((e)=>{
				this.recordEnd(e);
			})
			// #endif
		},
		onShow(){
			//设置主题颜色
			that.GLOBAL.setThemeColor(that.APPTheme)
			this.scrollTop = 9999999;
			//设置导航条颜色
			setTimeout(function(){
				that.setNavigationBarColor();
			},500)
			//模板借由本地缓存实现发红包效果，实际应用中请不要使用此方法。
			//
			uni.getStorage({
				key: 'redEnvelopeData',
				success:  (res)=>{
					console.log(res.data);
					let nowDate = new Date();
					let row = {type:"user",uuid:that.$lizhao.guid(32),messageType:"redEnvelope",time:nowDate.getHours()+":"+nowDate.getMinutes(),userId:0,userName:"大黑哥",face:"/static/image/filemanag/doc.png",content:{blessing:res.data.blessing,rid:Math.floor(Math.random()*1000+1),isReceived:false}};
					this.screenMsg(row);
					uni.removeStorage({key: 'redEnvelopeData'});
				}
			});
		},
		onUnload() {
			that.$lizhao.lzsqlite.updateUnreadMsg(that.receiveId)
		},
		onNavigationBarButtonTap(e) {
			this.clickRightclose()
		},
		methods:{
			//设置导航条颜色
			setNavigationBarColor(){
				let backgroundColor='#000000',frontColor="#ffffff"
				
				if(that.APPTheme=='theme-light'){
					backgroundColor='#ffffff'
					frontColor="#000000"
				}else{
					backgroundColor='#000000'
					frontColor="#ffffff"
				}
				uni.setNavigationBarColor({
				    frontColor: frontColor,
				    backgroundColor:backgroundColor,
				    animation: {
				        duration: 400,
				        timingFunc: 'easeIn'
				    }
				})
			},
			//获取用户信息
			getReceiveInfoFn(){
				that.GLOBAL.doGet(that.api.GLOBAL_rest_sys_user_findUserById,{id:that.receiveId}).then(res=>{
					if(res.code=='0'){
						that.receiveInfo=res.data
						uni.setNavigationBarTitle({
							title: res.data.name
						});
					}
				}).catch(err=>{
					console.log('获取用户信息失败');
				})
			},
			//打开数据库
			openDatabase(){
				//判断数据库是否打开
				let onoff=that.$lizhao.lzsqlite.isOpenDatabase()
				if(!onoff){//打开数据库
					that.$lizhao.lzsqlite.openDatabase().then(res=>{
						//获取本地数据库聊天消息
						that.getSqChatData()
					})
				}else{
					//获取本地数据库聊天消息
					that.getSqChatData()
				}
			},
			//获取本地数据库聊天消息
			getSqChatData(pageSize=10,pageNum=1){
				console.log(pageNum);
				//查询数据
				that.$lizhao.lzsqlite.getPageLimit({pageSize:pageSize,pageNum:pageNum,receiveId:that.receiveId}).then(res=>{
					console.log(res);
					if(res.code=='0'){
						that.SqChatData=[...res.data,...that.SqChatData]
						console.log(that.SqChatData);
						let list=that.SqChatData.map((item)=>{
							try{
								item.content=JSON.parse(item.content)
							}catch(e){
								//TODO handle the exception
							}
							return item
						})
						// 加载初始页面消息
						that.getMsgList(list,pageNum)
						//更新数据库当前发送者用户所有未读消息给为已读
						that.$lizhao.lzsqlite.updateUnreadMsg(that.receiveId)
					}
				})
			},
			//导航栏更多
			clickRightclose(){
				console.log(that.receiveId);
				uni.navigateTo({
					url: '../setUp/setUp?receiveId='+that.receiveId,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 接受消息(筛选处理)
			screenMsg(msg){
				//从长连接处转发给这个方法，进行筛选处理
				if(msg.type=='system'){
					// 系统消息
					switch (msg.messageType){
						case 'text':
							this.addSystemTextMsg(msg);
							break;
						case 'redEnvelope':
							this.addSystemRedEnvelopeMsg(msg);
							break;
					}
				}else if(msg.type=='user'){
					// 用户消息
					switch (msg.messageType){
						case 'text':
							this.addTextMsg(msg);
							break;
						case 'voice':
							this.addVoiceMsg(msg);
							break;
						case 'img':
							this.addImgMsg(msg);
							break;
						case 'video':
							this.addVideoMsg(msg);
							break;
						case 'redEnvelope':
							this.addRedEnvelopeMsg(msg);
							break;
					}
					//非自己的消息震动
					if(msg.userId!=JSON.parse(that.userInfo).id){
						console.log('振动');
						uni.vibrateLong();
					}
				}
				setTimeout(function() {
					// 滚动到底
					that.scrollToView = 'msg'+msg.uuid
				},500);
			},
			
			//触发滑动到顶部(加载历史信息记录)
			loadHistory(e){
				console.log('触发滑动到顶部');
				if(this.isHistoryLoading){
					this.isHistoryLoading = false;
					return ;
				}
				let Viewid = that.msgList[0].uuid;//记住第一个信息ID
				this.isHistoryLoading = true;//参数作为进入请求标识，防止重复请求
				this.scrollAnimation = false;//关闭滑动动画
				
				that.page.pageNum=that.page.pageNum+1
				//获取本地数据库聊天消息
				that.getSqChatData(that.page.pageSize,that.page.pageNum)
				//这段代码很重要，不然每次加载历史数据都会跳到顶部
				that.$nextTick(function() {
					that.isHistoryLoading = false;
					that.scrollToView = 'msg'+Viewid;//跳转上次的第一行信息位置
					that.$nextTick(function() {
						that.scrollAnimation = true;//恢复滚动动画
					});
				});
			},
			//下拉刷新被复位
			refresherrestore(){
				console.log('下拉刷新被复位');
				this.isHistoryLoading= 'restore'; // 需要重置
			},
			// 加载初始页面消息
			getMsgList(list,pageNum){
				// 获取消息中的图片,并处理显示尺寸
				for(let i=0;i<list.length;i++){
					if(list[i].type=='user'&&list[i].messageType=="img"){
						list[i].content = this.setPicSize(list[i].content);
						this.msgImgList.push(list[i].content.url);
					}
				}
				this.msgList = list;
				that.SqChatData=list
				// 滚动到底部
				if(pageNum==1){
					that.$nextTick(function() {
						//进入页面滚动到底部
						that.scrollTop = 9999;
						that.$nextTick(function() {
							that.scrollAnimation = true;
						});
					});
				}
				
			},
			//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
			setPicSize(content){
				// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
				let maxW = uni.upx2px(350);//350是定义消息图片最大宽度
				let maxH = uni.upx2px(350);//350是定义消息图片最大高度
				if(content.w>maxW||content.h>maxH){
					let scale = content.w/content.h;
					content.w = scale>1?maxW:maxH*scale;
					content.h = scale>1?maxW/scale:maxH;
				}
				return content;
			},
			
			//更多功能(点击+弹出) 
			showMore(){
				this.isVoice = false;
				this.hideEmoji = true;
				if(this.hideMore){
					this.hideMore = false;
					this.openDrawer();
				}else{
					this.hideDrawer();
				}
			},
			// 打开抽屉
			openDrawer(){
				this.popupLayerClass = 'showLayer';
			},
			// 隐藏抽屉
			hideDrawer(){
				this.popupLayerClass = '';
				setTimeout(()=>{
					this.hideMore = true;
					this.hideEmoji = true;
				},150);
			},
			//发红包
			handRedEnvelopes(){
				uni.navigateTo({
					url:'HM-hand/HM-hand'
				});
				this.hideDrawer();
			},
			//选照片 or 拍照
			getImage(){
				this.hideDrawer();
				uni.chooseImage({
					sourceType:['album','camera'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res)=>{
						for(let i=0;i<res.tempFilePaths.length;i++){
							uni.getImageInfo({
								src: res.tempFilePaths[i],
								success: (image)=>{
									let content = {url:res.tempFilePaths[i],w:image.width,h:image.height};
									let uuid=that.$lizhao.guid(32)
									//文件上传
									that.uploadChatFile(res.tempFilePaths[i],uuid).then(result=>{
										console.log(result);
										if(result&&result.path){
											content.url=that.GLOBAL.image_svr+result.path
											console.log(content);
											that.sendMsg(content,'img',uuid);
										}
									})
								}
							});
						}
					}
				});
			},
			//拍摄或选取视频
			getCamera(){
				this.hideDrawer();
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function (res) {
						console.log(res.tempFilePath);
						let content = {url:res.tempFilePath};
						let uuid=that.$lizhao.guid(32)
						//文件上传
						that.uploadChatFile(res.tempFilePath,uuid).then(result=>{
							console.log(result);
							if(result&&result.path){
								content.url=that.GLOBAL.image_svr+result.path
								content.videoPath=that.GLOBAL.image_svr+result.videoPath
								content.fileName=result.fileName
								that.sendMsg(content,'video',uuid);
							}
						})
					}
				});
			},
			// 选择表情
			chooseEmoji(){
				this.hideMore = true;
				if(this.hideEmoji){
					this.hideEmoji = false;
					this.openDrawer();
				}else{
					this.hideDrawer();
				}
			},
			//添加表情
			addEmoji(em){
				this.textMsg+=em.alt;
			},
			
			//获取焦点，如果不是选表情ing,则关闭抽屉
			textareaFocus(){
				if(this.popupLayerClass=='showLayer' && this.hideMore == false){
					this.hideDrawer();
				}
			},
			// 发送文字消息
			sendText(){
				this.hideDrawer();//隐藏抽屉
				if(!this.textMsg){
					return;
				}
				let content = this.replaceEmoji(this.textMsg);
				let msg = {text:content}
				this.sendMsg(msg,'text',that.$lizhao.guid(32));
				this.textMsg = '';//清空输入框
			},
			//替换表情符号为图片
			replaceEmoji(str){
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g,(item, index)=>{
					console.log("item: " + item);
					for(let i=0;i<this.emojiList.length;i++){
						let row = this.emojiList[i];
						for(let j=0;j<row.length;j++){
							let EM = row[j];
							if(EM.alt==item){
								//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径 
								//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
								let onlinePath = 'https://s2.ax1x.com/2019/04/12/'
								let imgstr = '<img src="'+onlinePath+this.onlineEmoji[EM.url]+'">';
								console.log("imgstr: " + imgstr);
								return imgstr;
							}
						}
					}
				});
				return '<div style="display: flex;align-items: center;word-wrap:break-word;">'+replacedStr+'</div>';
			},
			
			// 发送消息
			sendMsg(content,type,uuid){
				// isSend是否发送 0正在发送，1已发送， 2发送失败
				// isRead是否已读，0未读，1已读
				// isTop是否置顶 0不置顶 1置顶
				// isMsgShow当前消息在消息列表中是否删除【不显示】默认为显示1  0不显示
				let nowDate=that.$lizhao.timeFormat(new Date().getTime(),'yyyy-mm-dd hh:MM:ss') 
				let msg = {type:"user",uuid:uuid,time:nowDate,messageType:type,userId:JSON.parse(that.userInfo).id,userInfo:that.userInfo,receiveInfo:JSON.stringify(that.receiveInfo), content:content,receiveId:that.receiveId,isSend:0,isRead:0,isTop:0,isMsgShow:1}
				// 模拟本地发送消息
				that.screenMsg(msg);
				//请求发送消息
				that.setChatMessage(msg)
			},
			//请求发送消息
			setChatMessage(msg){
				let req={
					...msg,
					content:encodeURI(JSON.stringify(msg.content))
				}
				console.log('发送时间----------------',req.uuid);
				that.GLOBAL.doGet(that.api.GLOBAL_rest_webSocket_chat_message,req).then(res=>{
					console.log(res);
					if(res.code=='0'){
						if(res.data=="发送成功"){
							// isSend 0正在发送，1已发送， 2发送失败
							//isRead 0未读 1已读
							msg.isSend=1
							msg.isRead=1
							//插入数据到本地数据库
							that.insertDataFn(msg)
						}else{//发送失败
							// isSend是否发送 0正在发送，1已发送， 2发送失败
							// isRead是否已读，0未读，1已读
							// isTop是否置顶 0不置顶 1置顶
							// isMsgShow当前消息在消息列表中是否删除【不显示】默认为显示1  0不显示
							//userInfo发送者用户信息
							msg.isSend=2
							msg.isRead=1
							let sysMsg={type:"system",uuid:msg.uuid,messageType:"text",time:msg.time,userId:JSON.parse(that.userInfo).id,userInfo:that.userInfo,receiveInfo:JSON.stringify(that.receiveInfo), receiveId:that.receiveId,content:{text:"用户不在线，已离线发送"},isSend:1,isRead:1,isTop:0,isMsgShow:1}
							// 模拟本地发送消息
							that.screenMsg(sysMsg);
							//插入数据到本地数据库
							that.insertDataFn(msg)
							//插入数据到本地数据库
							that.insertDataFn(sysMsg)
						}
					}else{
						// isSend 0正在发送，1已发送， 2发送失败
						msg.isSend=2
						msg.isRead=1
						let sysMsg={type:"system",uuid:msg.uuid,messageType:"text",content:{text:"发送失败"}}
						// 模拟本地发送消息
						that.screenMsg(sysMsg);
					}
				}).catch(error=>{
					console.log(error);
				})
			},
			//插入数据到本地数据库
			insertDataFn(msg){
				that.$lizhao.lzsqlite.insertDataFn(msg).then(res=>{
					console.log(res);
				})
			},
			// 添加文字消息到列表
			addTextMsg(msg){
				this.msgList.push(msg);
			},
			// 添加语音消息到列表
			addVoiceMsg(msg){
				this.msgList.push(msg);
			},
			// 添加图片消息到列表
			addImgMsg(msg){
				msg.content = this.setPicSize(msg.content);
				this.msgImgList.push(msg.content.url);
				this.msgList.push(msg);
			},
			//添加视频到列表
			addVideoMsg(msg){
				this.msgList.push(msg);
			},
			addRedEnvelopeMsg(msg){
				this.msgList.push(msg);
			},
			// 添加系统文字消息到列表
			addSystemTextMsg(msg){
				this.msgList.push(msg);
			},
			// 添加系统红包消息到列表
			addSystemRedEnvelopeMsg(msg){
				this.msgList.push(msg);
			},
			// 打开红包
			openRedEnvelope(msg,index){
				let rid = msg.content.rid;
				uni.showLoading({
					title:'加载中...'
				});
				console.log("index: " + index);
				//模拟请求服务器效果
				setTimeout(()=>{
					//加载数据
					if(rid==0){
						this.redenvelopeData={
							rid:0,	//红包ID
							from:"大黑哥",
							face:"/static/img/im/face/face.jpg",
							blessing:"恭喜发财，大吉大利",
							money:"已领完"
						}
					}else{
						this.redenvelopeData={
							rid:1,	//红包ID
							from:"售后客服008",
							face:"/static/img/im/face/face_2.jpg",
							blessing:"恭喜发财",
							money:"0.01"
						}
						if(!msg.content.isReceived){
							// {type:"system",msg:{id:8,type:"redEnvelope",content:{text:"你领取了售后客服008的红包"}}},
							this.sendSystemMsg({text:"你领取了"+(msg.userinfo.uid==JSON.parse(that.userInfo).id?"自己":msg.userinfo.username)+"的红包"},'redEnvelope');
							console.log("this.msgList[index]: " + JSON.stringify(this.msgList[index]));
							this.msgList[index].msg.content.isReceived = true;
						}
					}
					uni.hideLoading();
					this.windowsState = 'show';
					
				},200)
				
			},
			// 关闭红包弹窗
			closeRedEnvelope(){
				this.windowsState = 'hide';
				setTimeout(()=>{
					this.windowsState = '';
				},200)
			},
			sendSystemMsg(content,type){
				let row = {type:"system",uuid:that.$lizhao.guid(32),type:type,content:content};
				this.screenMsg(row)
			},
			//领取详情
			toDetails(rid){
				uni.navigateTo({
					url:'/pages/IM/lz-chat/lz-details/lz-details?rid='+rid
				})
			},
			// 预览图片
			showPic(msg){
				uni.previewImage({
					indicator:"none",
					current:msg.content.url,
					urls: this.msgImgList
				});
			},
			//播放视频
			openVideo(row){
				uni.navigateTo({
					url: '../../template/video/video?url='+row.content.url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 播放语音
			playVoice(msg){
				this.playMsgid=msg.uuid;
				this.AUDIO.src = msg.content.url;
				this.$nextTick(function() {
					this.AUDIO.play();
				});
			},
			// 录音开始
			voiceBegin(e){
				if(e.touches.length>1){
					return ;
				}
				this.initPoint.Y = e.touches[0].clientY;
				this.initPoint.identifier = e.touches[0].identifier;
				this.RECORDER.start({format:"mp3"});//录音开始,
			},
			//录音开始UI效果
			recordBegin(e){
				this.recording = true;
				this.voiceTis='松开 结束';
				this.recordLength = 0;
				this.recordTimer = setInterval(()=>{
					this.recordLength++;
				},1000)
			},
			// 录音被打断
			voiceCancel(){
				this.recording = false;
				this.voiceTis='按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.willStop = true;//不发送录音
				this.RECORDER.stop();//录音结束
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e){
				if(!this.recording){
					return;
				}
				let touche = e.touches[0];
				//上滑一个导航栏的高度触发上滑取消发送
				if(this.initPoint.Y - touche.clientY>=uni.upx2px(100)){
					this.willStop = true;
					this.recordTis = '松开手指 取消发送'
				}else{
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送'
				}
			},
			// 结束录音
			voiceEnd(e){
				if(!this.recording){
					return;
				}
				this.recording = false;
				this.voiceTis='按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.RECORDER.stop();//录音结束
			},
			//录音结束(回调文件)
			recordEnd(e){
				clearInterval(this.recordTimer);
				if(!this.willStop){
					console.log("e: " + JSON.stringify(e));
					let content = {
						length:0,
						url:e.tempFilePath,
						progress:0//上传进度
					}
					//时长转换
					content.length = that.formatTimeLenth(that.recordLength)
					//当前录音的uuid后面进度条需要
					let uuid=that.$lizhao.guid(32)
					//文件上传
					that.uploadChatFile(content.url,uuid).then(result=>{
						if(result&&result.path){
							content.url=that.GLOBAL.image_svr+result.path
							// 时长转换
							content.length=that.formatTimeLenth(result.time)
							that.sendMsg(content,'voice',uuid);
						}
					})
					
				}else{
					console.log('取消发送录音');
				}
				this.willStop = false;
			},
			//时长转换
			formatTimeLenth(time){
				let min = parseInt(time/60);
				let sec = time%60;
				min = min<10?'0'+min:min;
				sec = sec<10?'0'+sec:sec;
				return min+':'+sec;
			},
			//文件上传
			uploadChatFile(FilePath,uuid){
				return new Promise((result,reject)=>{
					that.GLOBAL.uploadFile(that.api.GLOBAL_rest_file_upload_uploadChatFile,FilePath,function(uploadTask){
						//苹果目前监听不到上传进度，舍弃次方法，等待官方解决
						//筛选出刚刚发出去的文件的下标
						// let fileIndex=0
						// that.msgList.forEach((item,index)=>{
						// 	if(item.uuid==uuid){
						// 		fileIndex=index
						// 	}
						// })
						// //监听上传进度
						// uploadTask.onProgressUpdate((res)=>{
						// 	console.log('上传进度' + res.progress);
						// 	that.msgList[fileIndex].content.progress=res.progress
						// })
					}).then(res=>{
						console.log(res);
						if(res){
							result(res)
						}
					})
				})
				
			},
			// 切换语音/文字输入
			switchVoice(){
				this.hideDrawer();
				this.isVoice = this.isVoice?false:true;
			},
			discard(){
				return;
			}
		}
	}
</script>
<style lang="scss">
	@import "./lz-chat.scss"; 
</style>